/*
 * @Author: nqx2007 fenglimima334@163.com
 * @Date: 2023-12-12 16:31:23
 * @LastEditors: nqx2007 fenglimima334@163.com
 * @LastEditTime: 2023-12-12 20:37:47
 * @FilePath: /business-manager/src/pages/CouponManage/BuyCouponList/index.tsx
 * @Description: 优惠券管理-购入优惠券
 */


import { getBuyCouponList } from '@/services';
import {
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import type { FormInstance } from 'antd';
import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useEffect, useRef, useState } from 'react';

import { defaultPagination, defaultTableData } from '@/utils/globalConstants';
import {
  CouponEnum,
  BuyCouponEnum,
  BuyCouponTableDataType,
} from '../type.d';


export default function BuyCouponListPage() {
  const searchRef = useRef<FormInstance>();
  const [tableData, setTableData] = useState({ ...defaultTableData });
  const [paginationCurrent, setPagination] = useState({ ...defaultPagination });
  //获取优惠券列表数据
  const fetchBuyCouponList = async (params = {}) => {
    const searchValues = searchRef?.current?.getFieldsValue() ?? {};
    const searchParams = {
      ...searchValues,
      ...paginationCurrent,
      ...params,
    };
    console.log('进行搜索的条件为', searchParams);
    const result = await getBuyCouponList(searchParams);
    const { dataList, totalResult } = result?.data ?? {};
    setTableData({
      dataList,
      total: totalResult,
    });
  };
  const columns: ColumnsType<BuyCouponTableDataType> = [
    {
      title: '优惠券',
      dataIndex: CouponEnum.NAME,
      width: 150,
    },
    {
      title: '类型',
      dataIndex: CouponEnum.TYPE,
      width: 150,
    },
    {
      title: '来源商家',
      dataIndex: BuyCouponEnum.SOURCE,
      width: 150,
    },
    {
      title: '购买数量',
      dataIndex: BuyCouponEnum.COUNT_BUYS,
      width: 150,
    },
    {
      title: '购买单价',
      dataIndex: BuyCouponEnum.PRICE_BUY,
      width: 150,
    },
    {
      title: '促销价',
      dataIndex: BuyCouponEnum.PRICE_DISCOUNT,
      width: 150,
    },
    {
      title: '领取数量',
      dataIndex: CouponEnum.COUNT_DRAW,
      width: 150,
    },
    {
      title: '核销数量',
      dataIndex: CouponEnum.COUNT_USED,
      width: 150,
    },
  ];
  useEffect(() => {
    fetchBuyCouponList();
  }, []);

  return (
    <div>
      <QueryFilter
        defaultCollapsed={false}
        split
        formRef={searchRef}
        submitter={{
          render: (_, dom) => {
            return dom.reverse();
          },
        }}
        onFinish={async (values) => {
          fetchBuyCouponList({ ...values });
        }}
        onReset={() => {
          fetchBuyCouponList();
        }}
      >
        <ProFormText name={CouponEnum.NAME} label="优惠券" />
      </QueryFilter>
      <Table
        rowKey={BuyCouponEnum.ID}
        dataSource={tableData.dataList}
        columns={columns}
        scroll={{ x: 'max-width' }}
        style={{ marginTop: '20px' }}
        pagination={{
          pageSize: paginationCurrent.pageSize,
          current: paginationCurrent.page,
          pageSizeOptions: [20, 50, 100],
          showQuickJumper: true,
          showSizeChanger: true,
          onChange: (page, pageSize) => {
            setPagination({ page, pageSize });
            fetchBuyCouponList({ page, pageSize });
          },
        }}
      />
    </div>
  );
}
